<template>
  <div class="container">
    <div>
      <el-form>
        <el-form-item>
          <el-button @click="add" style="width:196px;margin-left:35%"><i class="el-icon-plus" style="margin-right: 5px;"></i>添加问题
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="height:750px" class="item-container">
      <el-form ref="form" :model="form" label-width="80px" style="margin-top:15px ;">

        <!-- 添加选项 -->

        <el-form-item label="标题">
          <el-input v-model="name" style="width:95% ;"></el-input>
        </el-form-item>


        <!-- 遍历已创建的选项渲染 -->
        <div class="item" v-for="(item, index) in form.itemList" :key="index">
          <el-form-item>
            <div class="item_title">
              <span style="font-size:14px ;color:#666666">{{ index + 1 }}.{{ item.description }}  </span>
              <span style="font-size: 14px;color:#cccccc">({{ typeMap[item.questionType] }})： </span>
            </div>
            <!-- 单项填空 -->
            <div v-if="item.questionType==='填空题'">
              <el-input class="disabled" disabled style="width: 95%"></el-input>
            </div>
            <!-- 单选 -->
            <div v-else-if="item.questionType==='单选题'">
              <div class="warp" v-for="(elm, index) in item.chooseItems" :key="index">
                <el-radio :label="(index+1)+'、'+elm" style="margin-bottom: 10px;"></el-radio>
                <!--               <el-input v-model="item.problemAnswer[i]" disabled></el-input>-->
              </div>
            </div>

            <!-- 上移、下移、删除 -->
            <div style="margin-top: 15px;margin-bottom: 20px;" class="editItem">
              <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                <i class="el-icon-edit" @click="edit(item, index)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                <i class="el-icon-delete" @click="delItem(item)"></i>
              </el-tooltip>

            </div>
          </el-form-item>
        </div>
        <!-- 添加选项弹出框 -->
        <div class="additem">
          <el-dialog
            :title="typeMap[questItem.questionType]"
            :visible.sync="showItem"
            append-to-body
            width="30%">
            <el-radio-group v-model="radioBtn" @change="addType(radioBtn)" style="margin-bottom:15px ;">
              <el-radio-button label="填空题"></el-radio-button>
              <el-radio-button label="单选题"></el-radio-button>
            </el-radio-group>
            <el-form-item label="问题">
              <el-input v-model="itemTitle"></el-input>
            </el-form-item>
            <el-form-item label="添加选项" v-show="questItem.questionType != '填空题'">
              <el-input-number v-model="num" @change="handleChange" :min="1" :max="4"
                               style="width:150px ;"></el-input-number>
            </el-form-item>
            <el-form-item label="选项" v-for="(text, i) in itemText" :key="i" v-show="questItem.questionType != '填空题'">
              <el-input v-model="itemText[i]"></el-input>
            </el-form-item>
            <span slot="footer" class="dialog-footer">
              <el-button @click="clearItem"
                         style="background-color:#e4e4e4 ;border-color: #e4e4e4;color: #999;">取 消题目</el-button>
              <el-button type="primary" @click="determine">确 定</el-button>
          </span>
          </el-dialog>
        </div>
      </el-form>
    </div>
    <div>
      <div style="margin-top:50px;float: left;margin-right: 10px;margin-left: 620px">
        <router-link to="/ViewQuestionnaire">
          <el-button type="primary">返回</el-button>
        </router-link>
      </div>
      <div style="margin-top:50px;float: left;">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import {addQuestion, createQuestionnaire, deleteQuestion, queryQuestionnaireDetail} from "@/api/questionnaire";

export default {
  name: "ViewQuestionnaireDetail",
  props: {
    //触发关闭父组件弹窗
    cancelAdd: {
      type: Function,
      default: null
    },
  },
  data() {

    return {
      radioBtn: '填空题',
      // open:false,
      value: '',
      matrixsNum: 1,
      num: 1,
      name: '',//问卷名称
      form: {
        itemList: [],
      },
      itemTitle: '',
      itemText: new Array(1),
      questItem: {
        questionType: '填空题'
      },
      questionnaire: {
        id:"",
        name: "",
        questionList: []
      },

      showItem: false,
      typeMap: {
        单选题: '单选题',
        多选题: '多选题',
        填空题: '填空题',
      },
      editIndex: ''
    }
  },
  watch: {
    showItem() {
      if (!this.showItem) {
        this.clearItem()
      }
    }
  },
  methods: {
    getDetail(){
      if(this.$route.query.id!=null&&this.$route.query.id!=="0"){
        this.questionnaire.id=this.$route.query.id
        queryQuestionnaireDetail(this.$route.query.id)
          .then((response) => {
            if (response.success) {
              this.form.itemList = response.data.questionList;
            }
          })
      }
      this.name=this.$route.query.name;
    },
    // 创建选项
    add(type) {
      this.questItem.questionType = this.radioBtn
      this.showItem = true
    },
    addType(type) {
      this.questItem.questionType = type
      this.$forceUpdate();
    },
    // 增加/减少 子选项
    handleChange(val) {
      this.itemText.length = val
    },
    // 确定将选项添加进列表中进行渲染
    determine() {
      this.questItem.questionType = this.radioBtn
      if (this.questItem.questionType == '填空题') {
        // 填空
        if (this.itemTitle == '') {
          this.$message('请输入选项的标题内容');
          return
        }
        if (this.editIndex !== '') {
          this.questItem.description = this.itemTitle
          this.questItem.chooseItems = null
          this.form.itemList.splice(this.editIndex, 1, this.questItem)
          this.editIndex = ''
        } else {
          this.questItem.description = this.itemTitle;
          this.questItem.chooseItems = null
          this.questionnaire.questionList.push(this.questItem)//要提交给后台的
          this.form.itemList.push(this.questItem);
        }
        this.clearItem()
      }
      else if (this.questItem.questionType == '单选题' || this.questItem.questionType == '多选题') {
        // 单选、多选
        if (this.itemTitle == '') {
          this.$message('请输入选项的标题内容');
          return
        }
        for (var i = 0; i < this.itemText.length; i++) {
          if (this.itemText[i] == '' || this.itemText[i] == undefined) {
            this.$message('请完整输入每个选项内容');
            return
          }
        }
        if (this.editIndex !== '') {
          this.questItem.description = this.itemTitle;
          this.questItem.chooseItems = this.itemText;
          this.form.itemList.splice(this.editIndex, 1, this.questItem)
          this.editIndex = ''
        } else {
          this.questItem.description = this.itemTitle;
          this.questItem.chooseItems = this.itemText;
          this.questionnaire.questionList.push(this.questItem)//要提交给后台的
          this.form.itemList.push(this.questItem);
        }
        this.clearItem()
      }
    },
    // 编辑
    edit(item, editIndex) {
      this.radioBtn = item.questionType
      this.editIndex = editIndex
      if (item.questionType !== '填空题') {
        this.num = item.chooseItems.length
        this.showItem = true
        this.questItem = item
        this.itemTitle = item.description
        this.itemText = []
        this.itemText.push(...item.chooseItems)
      } else {
        this.showItem = true
        this.questItem = item
        this.itemTitle = item.description
      }
    },
    // 关闭弹窗，清空数据
    clearItem() {
      this.num = 1
      this.itemTitle = ''
      this.itemText = ['']
      this.questItem = {}
      this.showItem = false

    },
    close() {
      this.form.itemList = []
      this.name = ''
      this.open=false
    },
    // 删除
    delItem(item) {

      this.$modal
        .confirm('是否确认删除编号为"' + item.id + '"的题目？')
        .then(
          function () {
          return deleteQuestion(item.id);
        })
        .then((response) => {
          if (response.success) {
            let index = this.form.itemList.indexOf(item)
            this.form.itemList.splice(index, 1)
            this.$modal.msgSuccess("删除成功");
            // this.getPage(this.queryParams);
          }
        })
    },
    // 提交
    onSubmit() {
      if (this.name==null||this.name === '') {
        this.$message('请输入问卷标题');
        return
      }
      if (this.form.itemList.length === 0) {
        // alert("至少添加一个选项")
        this.$message('至少添加一个选项');
        return
      }
      this.questionnaire.name = this.name;
      // this.questionnaire.questionList = this.form.itemList;
      if(this.$route.query.id==="0"){
        alert(JSON.stringify(this.questionnaire))
        createQuestionnaire(this.questionnaire)
          .then((response) => {
            if (response.success) {
              this.questionnaire.questionList=null;
              alert("操作成功")
              this.$emit("exit");
            }
          })
        this.$router.push("/ViewQuestionnaire")
      }
      else {
        alert(JSON.stringify(this.questionnaire))
        addQuestion(this.questionnaire)
          .then((response) => {
            if (response.success) {
              this.questionnaire.questionList=null;
              // alert("操作成功")
              this.$modal.msgSuccess("保存成功");
              this.$emit("exit");
            }
          })
        this.$router.push("/ViewQuestionnaire")
      }
    },
  },
  created() {
    this.getDetail();
  }
}
</script>

<style lang="scss" scoped>
.warp {
  display: flex;
  align-items: center;
}

.disabled {
  background: #F5F7FA;
}

input {
  -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  margin: 10px 0 0;
}

.el-radio {
  color: #606266;
  cursor: pointer;
  margin-right: 0;
}

.el-radio-button {
  margin-right: 65px;
  width: 106px;
}

::v-deep .el-radio-button--medium .el-radio-button__inner {
  border-radius: 20px;
  border: 1px solid #00477d;
  height: 30px;
  padding-top: 6px;
  width: 160px;
}

::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #FFFFFF;
  background-color: #00477d;
  border-color: #00477d;
  -webkit-box-shadow: -1px 0 0 0 #00477d;
  box-shadow: -1px 0 0 0 #00477d;
}

::v-deep .el-dialog {
  border-radius: 15px;
}

::v-deep .el-dialog__body {
  padding: 10px 15px;
}

.el-input--medium {
  width: 423px;
}

.editItem i {
  font-Size: 24px;
  font-weight: bold;
  color: #00477d;
  margin-right: 30px;
  cursor: pointer;
}
.item-container{
  overflow: scroll;
  overflow-x: hidden;
}
</style>
